<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            text-align: center;
        }
        
        html,
        body {
            width: 100%;
            height: 100%;
            user-select: none;
        }
        
        h2 {
            margin: 4% 0;
            color: rgb(10, 73, 145);
        }
        
        h3 {
            margin: 3% 0;
            color: rgb(10, 73, 145);
        }
        
        svg {
            animation: 2s linear infinite svg-animation;
            max-width: 80px;
        }
        
        @keyframes svg-animation {
            0% {
                transform: rotateZ(0deg);
            }
            100% {
                transform: rotateZ(360deg)
            }
        }
        
        circle {
            animation: 1.4s ease-in-out infinite both circle-animation;
            display: block;
            fill: transparent;
            stroke: rgb(10, 73, 145);
            stroke-linecap: round;
            stroke-dasharray: 283;
            stroke-dashoffset: 280;
            stroke-width: 10px;
            transform-origin: 50% 50%;
        }
        
        @keyframes circle-animation {
            0%,
            25% {
                stroke-dashoffset: 280;
                transform: rotate(0);
            }
            50%,
            75% {
                stroke-dashoffset: 75;
                transform: rotate(45deg);
            }
            100% {
                stroke-dashoffset: 280;
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <h2>稍等片刻&nbsp;&nbsp;马上就好</h2>
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="45"/>
      </svg>
    <h3>加载中</h3>
</body>

</html>